import 'package:bruno/bruno.dart';
import 'package:common/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../splash/privacy_policy_dialog.dart';
import '../model/login_config_model.dart';
import 'login_phone_logic.dart';
import 'login_phone_state.dart';
import 'widget/agreement_widget.dart';
import 'widget/code_text_field_widget.dart';
import 'widget/phone_text_field_widget.dart';
import 'widget/verification_code_timer_widget.dart';

class LoginPhonePage extends StatefulWidget {
  const LoginPhonePage({super.key, this.initIMSDK, required this.config});
  final Function? initIMSDK;

  final LoginConfig config;
  @override
  State<LoginPhonePage> createState() => _LoginPhonePageState();
}

class _LoginPhonePageState extends State<LoginPhonePage> {
  final LoginPhoneLogic logic = Get.put(LoginPhoneLogic());
  final LoginPhoneState state = Get.find<LoginPhoneLogic>().state;

  String userID = '';
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        children: [
          Image.asset('assets/app/images/auth/background_top_image.png'),
          Scaffold(
              appBar: BrnAppBar(
                title: '登录/注册'.tr,
                backgroundColor: const Color.fromARGB(0, 17, 11, 11),
                leading: const SizedBox(),
              ),
              backgroundColor: Colors.transparent,
              body: GetBuilder<LoginPhoneLogic>(
                  init: LoginPhoneLogic(),
                  initState: (_) {},
                  builder: (context) {
                    return Padding(
                      padding: EdgeInsets.symmetric(horizontal: 20.w),
                      child: ScrollConfiguration(
                          behavior: NoShadowScrollBehavior(),
                          child: SingleChildScrollView(
                              scrollDirection: Axis.vertical,
                              child: Column(
                                mainAxisSize: MainAxisSize.max,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  SizedBox(height: 62.h),
                                  Padding(
                                    padding: EdgeInsets.only(left: 16.0.w),
                                    child: Text('验证码登录',
                                        style: TextStyle(
                                            color: const Color(0xFF1E2733),
                                            fontSize: 27.sp,
                                            fontWeight: FontWeight.w600)),
                                  ),
                                  SizedBox(height: 70.h),
                                  PhoneTextFieldWidget(
                                    onChanged: (value) {
                                      state.phone = value;
                                      logic.update();
                                    },
                                    onSubmit: (value) {
                                      state.phone = value;
                                    },
                                  ),
                                  SizedBox(height: 16.h),
                                  CodeTextFieldWidget(
                                    onChanged: (value) {
                                      state.code = value;
                                      logic.update();
                                    },
                                    onSubmit: (value) {
                                      state.code = value;
                                    },
                                    // rightWidget: Container(
                                    //   height: 35.h,
                                    //   padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 5.h),
                                    //   alignment: Alignment.center,
                                    //   decoration: BoxDecoration(
                                    //       color: logic.isCounting ? const Color(0xFF999999) : const Color(0xFF25D4D0),
                                    //       borderRadius: BorderRadius.all(Radius.circular(17.r))),
                                    //   child: Text(
                                    //     logic.isCounting ? "剩余${logic.countdownTime} s" : '获取验证码'.tr,
                                    //     style: TextStyle(fontSize: 12.sp, color: Colors.white),
                                    //   ),
                                    // ).onTap(() => logic.isCounting ? null : () => logic.showVerifyCodedDialog()),

                                    rightWidget: VercodeTimerWidget(
                                      verifyBuilder: () {
                                        if (!logic.isChecked) {
                                          Toast.showText('请先阅读并同意协议');
                                          return false;
                                        }
                                        if (state.phone.length != 11 ||
                                            state.phone.startsWith('10') ||
                                            state.phone.startsWith('11') ||
                                            state.phone.startsWith('12')) {
                                          Toast.showText('请输入正确的手机号');
                                          return false;
                                        }
                                        return true;
                                      },
                                      builder: () async {
                                        /// 调取成功接口开始倒计时
                                        return await logic.requestSendVerifyCode();
                                      },
                                    ),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(top: 20.h),
                                    width: double.infinity,
                                    alignment: Alignment.centerRight,
                                    child: Text("收不到验证码？".tr,
                                            style: TextStyle(color: const Color(0xFF000000), fontSize: 13.sp))
                                        .onTap(() {
                                      _showAgreementDialog();
                                    }),
                                  ),
                                  BrnBigMainButton(
                                    title: "登录/注册".tr,
                                    width: double.infinity - 32 * 2,
                                    bgColor: const Color(0xFF25D4D0),
                                    bgDisEnableColor: const Color(0xFF25D4D0).withOpacity(0.6),
                                    themeData: BrnButtonConfig(
                                        bigButtonRadius: 255, bigButtonHeight: 45.h, bigButtonFontSize: 16.sp),
                                    isEnable: state.phone.length == 11 && state.code.length == 6 && logic.isChecked,
                                    onTap: () {
                                      logic.doPhoneCodeLogin();
                                    },
                                  ).marginOnly(top: 40, bottom: 20),
                                  AgreementWidget(
                                      config: widget.config,
                                      isChecked: logic.isChecked,
                                      onChecked: logic.handlerSelectAgreeCheckbox),
                                ],
                              ))),
                    );
                  })),
        ],
      ),
    );
  }

  void _showAgreementDialog() {
    SmartDialog.show(
      usePenetrate: false,
      clickMaskDismiss: true,
      backType: SmartBackType.block,
      keepSingle: true,
      useAnimation: false,
      builder: (context) => Center(
        child: CustomAlertWidget(
          title: '收不到验证码？',
          content: """1.请确认手机号是否正确
2.请确认手机是否欠费
3.请选择使用其他手机号登录
""",
          confirmText: '我知道了',
          confirmAction: () {},
        ),
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<LoginPhoneLogic>();
    super.dispose();
  }
}
